import styles from "@pages/personal/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import Slide, { SlideRef } from "@shared/slide";
import { useRef } from "react";
import UpdateNickname from "@pages/personal/widgets/updateNickname";
interface Props {
    // 用户昵称
    name: string;
}

export default function Nickname({ name }: Props) {
    const slideRef = useRef<SlideRef>(null);
    return (
        <li>
        <span>昵称</span>
        <div className={styles.value} onClick={() => slideRef.current?.open()}>
          <span>{name}</span>
          <GeekIcon type="iconbtn_right" className={styles.icon} />
        </div>
        <Slide ref={slideRef} direction={"toLeft"}>
          <UpdateNickname slideRef={slideRef} name={name} />
        </Slide>
      </li>
    );
}